<template>
	<view class="page">
		<view class="login_bg">
			<view style="width: 50rpx;height: 50rpx;position: absolute;" @click="back()">
				<image class="back" src="../img/back.png" mode=""></image>
			</view>
			<image class="img" src="../../static/img/welcome_bg.png" />
			<span class="sp_1">过往心率</span>
		</view>
		<view class="search">
			<!-- <view class="" style="margin: 20rpx 0rpx;position: absolute;"> -->
			<image style="position: absolute;width: 39rpx;height: 42rpx;right: 30rpx;top: 20rpx;z-index: 99;"
				src="../img/riqi.png" mode=""></image>
			<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @change="maskClick"
				placeholder="请选择日期" />
			<!-- </view> -->

		</view>


		<view class="table" style="margin-top: 100rpx;overflow: hidden;">
			<uni-table ref="table" :loading="loading" stripe type="" emptyText="暂无更多数据"
				@selection-change="selectionChange">
				<uni-tr style="border-radius: 20rpx;">
					<uni-th align="center"> <span style="position: relative;">
							<image style="width: 30rpx;height: 35rpx;position: absolute;left: 0rpx;top: 0rpx;"
								src="../img/rili.png" mode=""></image> 
								<span style="color: #fff;margin-left: 35rpx;">时间</span>
						</span> </uni-th>
					<uni-th align="center"><span style="color: #fff;">
							<image style="width: 49rpx;height: 30rpx;margin-right: 20prx"
								src="../img/xinlv.png" mode=""></image> 心率
						</span></uni-th>
					<!-- <uni-th align="center">地址</uni-th> -->
					<!-- <uni-th width="204" align="center">设置</uni-th> -->
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td>{{ item.createTime }}</uni-td>
					<uni-td>
						<view class="name" style="font-weight: 400;font-size: 40rpx;color: #E06565;">
							{{ item.heartRate1 }}次/分</view>
					</uni-td>
					<!-- <uni-td align="center">{{ item.address }}</uni-td> -->
					<!-- 	<uni-td>
						<view class="uni-group">
							<button class="uni-button" size="mini" type="primary">修改</button>
							<button class="uni-button" size="mini" type="warn">删除</button>
						</view>
					</uni-td> -->
				</uni-tr>
			</uni-table>
			<view class="uni-pagination-box">
				<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total"
					@change="change" />
			</view>
		</view>

	</view>
</template>

<script>
	import {
		PaginFindHeartRateAndLocationByTimeRange
	} from '@/utils/api.js'
	import {
		convertISOToBeijingTime
	} from '@/utils/util.js';

	export default {
		data() {
			return {
				searchVal: '',
				tableData: [],
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false,
				single: '',
			}
		},
		onLoad() {
			this.selectedIndexs = []
			// this.getData(1)
		},
		methods: {
			// 多选处理
			selectedItems() {
				return this.selectedIndexs.map(i => this.tableData[i])
			},
			// 多选
			selectionChange(e) {
				console.log(e.detail.index)
				this.selectedIndexs = e.detail.index
			},
			//批量删除
			delTable() {
				console.log(this.selectedItems())
			},
			// 分页触发
			change(e) {
				console.log(e);
				this.$refs.table.clearSelection()
				this.selectedIndexs.length = 0
				this.pageCurrent = e.current
				this.Get_message()
			},
			// 搜索
			search() {
				this.getData(1, this.searchVal)
			},
			//时间切换
			maskClick(e) {
				console.log('maskClick事件:', e);
				this.single = e
				this.Get_message()
			},
			// 获取数据
			Get_message() {
				this.tableData = []
				PaginFindHeartRateAndLocationByTimeRange({
					token: this.$store.state.vx_token,
					body: {
						pageNumber: this.pageCurrent,
						pageSize: this.pageSize,
						Date: this.single,
						userId: this.$store.state.vx_uid
					}
				}).then(res => {
					res.data.heartRates.forEach(item => {
						this.tableData.push({
							heartRate1: item.heartRate1,
							createTime: item.createTime
						})
					})
					this.total = res.data.totalHeartRates
					console.log('当前日期数据:', this.tableData);
				}).catch(err => {
					console.log(err);
				})
			},
			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，1 表示返回上一页，依次类推
					success: function() {}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .uni-datetime-picker--btn {
		background-color: #2CB0C5;
	}

	::v-deep .uni-calendar-item__weeks-box .uni-calendar-item--checked {
		background-color: #2CB0C5;
	}

	::v-deep .uni-calendar-item--multiple .uni-calendar-item--before-checked {
		background-color: #2CB0C5;
	}

	::v-deep .uni-calendar-item--multiple .uni-calendar-item--after-checked {
		background-color: #2CB0C5;
	}

	::v-deep .uni-section .uni-section-header__decoration {
		background-color: #2CB0C5;
	}

	::v-deep .uni-date-x {
		width: 687rpx;
		height: 85rpx;
		background: #FFFFFF;
		border-radius: 43rpx;
		border: 1rpx solid #E3E3E3;
	}

	::v-deep .uni-date-x--border {
		// border: none;
	}

	::v-deep .uni-date__x-input {
		font-weight: 500;
		font-size: 28rpx;
		color: #999EA0;
		// line-height: 40rpx;
	}

	::v-deep .uni-date-x--border {
		border: none;
	}

	::v-deep .uni-date__x-input {
		padding-left: 48rpx;
	}

	::v-deep .uni-icons {
		display: none;
	}

	::v-deep .table--border {
		border: none;
		// border-radius: 30rpx;
	}

	::v-deep .uni-table-tr {
		background: #2CB0C5;

		// font-weight: 400;
		// font-size: 32rpx;
		// color: #FFFFFF;
		// line-height: 40rpx;

	}

	::v-deep .uni-table-text {
		font-weight: 400;
		font-size: 26rpx;
		color: #63696B;
		background-color: #FFFFFF;
	}

	::v-deep .uni-table-td {
		background-color: #FFFFFF;
	}


	.page {
		width: 100vw;
		height: 100vh;
		position: relative;

		.login_bg {
			width: 750rpx;
			height: 722rpx;
			position: relative;

			.back {
				position: absolute;
				top: 130rpx;
				left: 30rpx;
				width: 23rpx;
				height: 36rpx;
			}

			.img {
				width: 100%;
				height: 100%;
			}

			.sp_1 {
				position: absolute;
				top: 150rpx;
				left: 277rpx;
				width: 200rpx;
				height: 32rpx;
				font-weight: 600;
				font-size: 32rpx;
				color: #333738;
				text-align: center;
				line-height: 32rpx;
			}
		}

		.search {
			position: absolute;
			top: 15%;
			left: 30rpx;
			width: 687rpx;
			height: 85rpx;

			.img {
				// float: right;
				width: 39rpx;
				left: 39rpx;
			}
		}

		.table {
			position: absolute;
			top: 17%;
			left: 30rpx;
			width: 690rpx;
			// height: 100%;
			background: #FFFFFF;
			border-radius: 25rpx;
		}


	}
</style>